<template>
  <div class="gd1">
    <van-nav-bar
      title="行程结束"
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <span>订单待支付</span>
      <h2><span style="font-size: 28px"><span style="font-size: 20px;color: red">￥</span>{{ totalFee }}</span><br></h2>
    </div>

    <div>
      <span>匿名评价乘客</span>
      <div>行程信息</div>
      <van-form v-model="form" @submit="onSubmit">
        <van-rate v-model="form.averageScore" @change="starOnChange"/>
        <div class="checkbox-container">
          <van-checkbox-group v-model="result" ref="checkboxGroup">
            <div class="checkbox-row">
              <van-checkbox :name="1" v-model="pj">文明礼貌</van-checkbox>
              <van-checkbox :name="2" v-model="pj">爱护车辆</van-checkbox>
              <van-checkbox :name="3" v-model="pj">沟通顺畅</van-checkbox>
            </div>
            <div class="checkbox-row" style="margin-top: 20px">
              <van-checkbox :name="4" v-model="pj"> 守时</van-checkbox>
              <van-checkbox :name="5" v-model="pj"> 爱干净</van-checkbox>
              <van-checkbox :name="6" v-model="pj"> 爱聊天</van-checkbox>
            </div>
          </van-checkbox-group>
        </div>
        <van-button class="bu1" @click="jj">继续接单</van-button>
        <van-button class="bu2" @click="xx">休息</van-button>
      </van-form>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import {Message} from "element-ui";

export default {
  data() {
    return {
      active: "",
      pj: [],
      result: [],
      value: 3,
      form: {},
      money: null,
      driverLong: null,
      resultStr: "",
      totalFee: 0,
      id: "",//订单id
      driverInfo: {},
      orders: {},
      orderNumber: "",//rider_queue表中的订单编号
      orderList:[],
      did:''
    };
  },
  created() {
    this.id=JSON.parse(localStorage.getItem("endOrderid"))
    this.did=JSON.parse(localStorage.getItem("endOrderdid"))

    this.totalFee = sessionStorage.getItem("totalFee");
    this.getOne()
    if (this.$route.query.orderId) {
      this.form.orderId = this.$route.query.orderId;
      this.driverLong = this.$route.query.driverLong;
    }
    // 在页面创建后延迟两秒调用getMoney方法
    this.getMoney();
    this.getOrderItem();
    this.id = sessionStorage.getItem("id");

    //订单id
    this.id = sessionStorage.getItem("id");

    // 使用async函数包裹相关异步操作，模拟同步执行效果
    (async () => {
      try {
        // 调用各个异步方法并等待它们依次完成
        await this.getMoney();
        await this.getOrderItem();
        await this.orderover();
        await this.findOrderNumber();
        await this.findOrders();
      } catch (error) {
        console.error("页面初始化时执行异步操作出现错误:", error);
        // 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知页面加载出现问题等
        this.$message.error("页面加载出现问题，请稍后重试");
      }
    })();
  },
  methods: {
    async findOrderNumber() {
      try {
        // 使用await等待axios.post请求完成，并获取返回结果
        const res = await axios.post(`/jiedan/riderQueue/findOrderNumber?id=${this.id}`);
        this.orderNumber = res.data;
        // alert("orderNumber=" + this.orderNumber);
      } catch (error) {
        console.error('查询订单数量出错：', error);
        // 可以在这里根据具体需求添加更多错误处理逻辑，比如给用户提示等
      }
    },
    getOne() {
      axios.get(`personal/RiderQueue/getOne?did=${this.did}&id=${this.id}`).then(res => {
        this.orderList = res.data;
        console.log(this.orderList)
        console.log('查找该订单信息')
      })
    },
    async findOrders() {
      // alert("orderNumber===" + this.orderNumber);
      try {
        const response = await axios.post(`/jiedan/riderQueue/findOrders?oid=${this.orderNumber}&id=${this.id}`);
        console.log('订单信息:', response.data.data);
        if (response.data.data.code == 200) {
          this.$message.success(response.data.message);
        } else if (response.data.data.code == 201) {
          this.$message.error(response.data.message);
        }
        this.orders = response.data.data;
      } catch (error) {
        console.error("查找订单信息时出错:", error);
      }
    },
    jj() {
      this.$router.push('/grabOrders')
        this.orderList.drivervaluation=this.pj;
      console.log(this.pj)
      console.log('司机对用户的评价')
        axios.post(`personal/RiderQueue/update?id=${this.id}&drivervaluation=${this.orderList.drivervaluation}`).then(res => {
          if (res.data.data==="成功"){
            alert("反馈成功")
          }
          this.pj=[];
        })
    },
    xx() {
      this.$router.push('/shouye')
    },
    listenReset() {
      // 获取行程id，如果不存在则进行合适的处理，这里简单示例为返回
      const todayId = localStorage.getItem('todayId');
      if (!todayId) {
        console.warn("没有找到todayId，无法进行修改订单状态操作");
        return;
      }
      updateTodayOrderStatus(todayId).then(res => {
        console.log(res);
        if (res.code === "200") {
          localStorage.removeItem('todayId');
        }
      });
      this.$router.push({
        path: '/homeIndex'
      });
    },
    goLisen() {
      this.$router.push({
        path: '/GetOrder',
        query: {
          driverId: 1
        }
      });
    },
    async orderover() {
      const res = await axios.post(`/jiedan/riderQueue/updateStatus2?id=${this.id}`);
      console.log("订单结束");
    },
    async getOrderItem() {
      try {
        // 这里假设实际接口地址为'/order/getOrderItem'，你需要根据真实情况替换
        const response = await axios.post('order/order/getOrderItem', {orderId: this.form.orderId});
        // 这里假设接口返回的数据结构中包含评价相关信息，你按实际情况调整处理逻辑
        const evaluationInfo = response.data.evaluation;
        this.form.averageScore = evaluationInfo.score;
        // 处理其他评价相关信息，比如评价内容等，示例中暂未详细体现
      } catch (error) {
        console.error("获取订单资费信息时出错:", error);
      }
    },
    starOnChange() {
      // 在这里添加starOnChange方法的逻辑，比如根据评分变化进行一些显示或数据处理等
    },
    async getMoney() {
      try {
        // 这里假设接口地址为'/order/getOrderCosts'，根据实际情况替换
        const response = await axios.post('order/order/getOrderCosts', {orderId: this.form.orderId});
        this.money = response.data.orderCost.orderMoney;
      } catch (error) {
        console.error("获取费用信息时出错:", error);
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      for (let i = 0; i < this.result.length; i++) {
        this.resultStr += this.result[i];
        if (i < this.result.length - 1) {
          this.resultStr += ",";
        }
      }
      console.log(this.resultStr);
      this.form.driverEvaluationoptions = this.resultStr;
    },
  },
};
</script>

<style scoped>
.bgso {
  background-color: orange;
  color: white;
}

.checkbox-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: 80px;
  padding-top: 50px;
}

.checkbox-row {
  width: 33%;
  align-items: center; /* 垂直居中对齐 */
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.checkbox-row van-checkbox {
  flex-basis: calc(33.33% - 10px); /* 每行显示三个，减去间距 */
  margin-bottom: 20px; /* 设置底部间距 */
  box-sizing: border-box;
}

checkbox {
  margin-left: 10px;
}

.gd1 {
  width: 400px;
  height: 700px;
}

.bu1 {
  width: 280px;
  background-color: #4EA9CB;
  color: white;
  border-radius: 10px;
  position: relative;
  left: 20px;
  top: 30px;
}

.bu2 {
  width: 100px;
  background-color: #919191;
  color: white;
  border-radius: 10px;
  position: relative;
  left: 100px;
  top: 30px;
}
</style>
